<template>
  <div class="Box">
    <!-- 顶部搜索 -->
    <div class="SearchBox flex-LAR">
      <el-input
        v-model="SearchKeyWord.searchValue"
        placeholder="请输入搜索内容"
        class="input-with-select"
        @keyup.enter="SearchEvent"
      >
        <template #prepend>
          <el-select v-model="SearchKeyWord.selectKey" style="width: 6.25rem">
            <el-option label="记录ID" value="1" />
          </el-select>
        </template>
        <template #append>
          <el-button class="searchBtn" :icon="Search" @click="SearchEvent" />
        </template>
      </el-input>
    </div>
    <!-- 事件列表展示 -->
    <el-card class="box-card mt-20" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>近期上报事件</span>
        </div>
      </template>
      <el-table :data="eventList" style="width: 100%" border>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="eventType" label="事件类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getEventTypeTag(row.eventType)">
              {{ getEventTypeName(row.eventType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="urgencyLevel" label="紧急程度" width="120">
          <template #default="{ row }">
            <el-tag :type="getUrgencyTag(row.urgencyLevel)">
              {{ getUrgencyName(row.urgencyLevel) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="事件描述"
          show-overflow-tooltip
        />
        <el-table-column prop="occurTime" label="发生时间" width="180" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === '1' ? 'success' : 'warning'">
              {{ row.status === "1" ? "已处理" : "待处理" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="small" @click="viewDetail(row)">查看</el-button>
            <el-button size="small" type="danger" @click="deleteEvent(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 搜索关键词
const SearchKeyWord = reactive({
  selectKey: "记录ID",
  searchValue: "",
});

// 事件类型选项
const eventTypes = ref([
  { value: "1", label: "自然灾害" },
  { value: "2", label: "公共卫生" },
  { value: "3", label: "安全事故" },
  { value: "4", label: "社会治安" },
  { value: "5", label: "其他事件" },
]);

// 静态事件数据
const eventList = ref([
  {
    id: 1,
    eventType: "1",
    urgencyLevel: "3",
    description: "社区东侧发生小型火灾，已初步控制",
    occurTime: "2025-03-10 14:30:00",
    status: "1",
  },
  {
    id: 2,
    eventType: "2",
    urgencyLevel: "2",
    description: "3栋2单元有居民出现发热症状",
    occurTime: "2025-03-09 09:15:00",
    status: "0",
  },
  {
    id: 3,
    eventType: "3",
    urgencyLevel: "1",
    description: "地下车库入口处地面塌陷",
    occurTime: "2025-03-08 18:45:00",
    status: "0",
  },
  {
    id: 4,
    eventType: "1",
    urgencyLevel: "2",
    description: "社区北侧草坪发现流浪狗咬伤居民",
    occurTime: "2025-03-11 08:20:00",
    status: "1",
  },
  {
    id: 5,
    eventType: "3",
    urgencyLevel: "3",
    description: "5栋1单元电梯突发故障停运",
    occurTime: "2025-02-12 11:30:00",
    status: "0",
  },
  {
    id: 6,
    eventType: "2",
    urgencyLevel: "1",
    description: "社区活动中心有人突发心脏病",
    occurTime: "2025-02-09 15:45:00",
    status: "1",
  },
  {
    id: 7,
    eventType: "1",
    urgencyLevel: "3",
    description: "社区西侧垃圾桶起火",
    occurTime: "2025-02-14 17:10:00",
    status: "0",
  },
  {
    id: 8,
    eventType: "3",
    urgencyLevel: "2",
    description: "地下停车场有车辆被划伤",
    occurTime: "2025-01-15 20:00:00",
    status: "1",
  },
  {
    id: 9,
    eventType: "2",
    urgencyLevel: "1",
    description: "4栋3单元有居民燃气泄漏",
    occurTime: "2025-01-16 07:50:00",
    status: "0",
  },
  {
    id: 10,
    eventType: "1",
    urgencyLevel: "2",
    description: "社区南侧健身器材损坏",
    occurTime: "2025-06-17 10:25:00",
    status: "1",
  },
]);

// 辅助函数
const getEventTypeName = (type) => {
  const item = eventTypes.value.find((item) => item.value === type);
  return item ? item.label : "未知类型";
};

const getEventTypeTag = (type) => {
  const map = { 1: "danger", 2: "warning", 3: "", 4: "info", 5: "" };
  return map[type] || "";
};

const getUrgencyName = (level) => {
  const map = { 1: "一般", 2: "紧急", 3: "非常紧急" };
  return map[level] || "未知";
};

const getUrgencyTag = (level) => {
  const map = { 1: "", 2: "warning", 3: "danger" };
  return map[level] || "";
};

// 事件操作函数
const viewDetail = (row) => {
  ElMessageBox.alert(
    `
      <div>
        <p><strong>事件类型：</strong>${getEventTypeName(row.eventType)}</p>
        <p><strong>紧急程度：</strong>${getUrgencyName(row.urgencyLevel)}</p>
        <p><strong>发生时间：</strong>${row.occurTime}</p>
        <p><strong>事件描述：</strong>${row.description}</p>
      </div>
    `,
    "事件详情",
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: "确定",
    }
  );
};

const deleteEvent = (id) => {
  ElMessageBox.confirm("确定删除该事件记录吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      eventList.value = eventList.value.filter((item) => item.id !== id);
      ElMessage.success("删除成功");
    })
    .catch(() => {
      console.log("取消删除");
    });
};

const SearchEvent = () => {
  console.log("顶部搜索");
};
</script>

<style scoped lang="scss">
.Box {
  position: relative;

  .SearchBox {
    width: 100%;
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #eee;

    .el-input {
      width: 350px;
      margin-left: 0.5rem;
    }
    .searchBtn {
  color: rgb(15, 153, 245);
}
}
.box-card {
margin-top: 20px;
}
}
</style>